<template>
  <div>
    <div v-for="(item, index) in list" :key="index" class="list">
      <div class="left">
        <img :src="item.pic" alt="">

      </div>
      <div class="right">
        <div>
          {{ item.name }}
        </div>
        <div style="text-align: center;">
          价格：{{ item.minPrice }}
        </div>
        <div>
          <button @click="item.paixu++ && $store.commit('kong')">+</button>
          <input type="text" v-model="item.paixu" style="width: 50px;">
          <button @click="item.paixu-- && $store.commit('kong')">-</button>
        </div>
      </div>
    </div>
    <footer>
      总价：{{ sum }}
    </footer>
  </div>
</template>

<script>
import { reactive, toRefs, computed } from 'vue';
import { useStore } from 'vuex';
export default {
  setup() {
    const { state } = useStore()
    const data = reactive({
      list: [],
      sum: 0
    })
    console.log(state);
    data.list = computed(() => {
      return state.list
    })
    data.sum = computed(() => {
      let sum = 0;
      data.list.forEach(element => {
        sum += element.paixu * element.minPrice
      });
      return sum
    })
    // console.log(data.list);
    return { ...toRefs(data) }
  }
}
</script>

<style lang="scss" scoped>
.list {
  width: 100%;
  height: 140px;
  margin: 10px 0;
  background-color: #ccc;
  display: flex;
  justify-content: space-between;

  .left {
    width: 30%;

    >img {
      width: 100%;
      height: 100%;
    }
  }

  .right {
    flex: 1;
    padding: 10px;
  }
}
</style>